<template>
  <view class="lsitobg fff">
    <view class="x-row">
		<view class="img "
        @click.prevent.stop="imgshow(li)">
     <image :src="$api.MrkImg(li.fId)"  class="lsitimg" ></image>
	    </view>
	   <!-- <image :src="{{li.fPic}}" class="lsitimg" @click.stop="$emit('clickMsg',li)"></image> -->
      <view class="x-col">
        <view class="x-row" @click.stop="$emit('clickMsg',li)">
          <view class="names x-col x-col-center">{{li.fName}} <slot name="label"></slot>
          </view>
          <slot name="detail"></slot>
        </view>
        <view class="x-row" style="padding-top: 20upx;">
          <image src="../static/cusIcon2.png" @click="cellPhone(li)" class="maptel x-col-center"
            mode="widthFix"></image>
          <view class="tel" @click="cellPhone(li)">{{li.fTell}}</view>
          <view class="" style="width: 40upx;"></view>
          <image src="../static/cusIcon3.png" class="maptel x-col-center" mode="widthFix"></image>
          <view class="tel">{{li.fClassSizeName}}</view>
        </view>
      </view>
    </view>
    <view class="x-row" @click="toStore(li)"
      style="margin-top: 10upx; background: #F8F9FC; padding: 15upx; border-radius: 10upx;">
      <image src="../static/cusIcon1.png" class="mapicon" mode="widthFix">
      </image>
      <view class="tel">{{li.fStreet + li.fAddress}}</view>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script>
export default {
  name: 'order-item',
  props: ['li'],
  data() {
    return {
      img: this.urlimg
    }
  },
  methods: {
    toStore(e) {
      let item = e.fMap.split(',')
      uni.openLocation({
        //​使用微信内置地图查看位置。
        latitude: parseFloat(item[1]), //要去的纬度-地址
        longitude: parseFloat(item[0]), //要去的经度-地址
        name: e.map_address
      })
    },
    cellPhone(e) {
      uni.makePhoneCall({
        phoneNumber: e.fTell
      })
    }
	,
	imgshow(item) {
	  let arr = null
	  
	   arr = [this.$api.MrkImg(item.fId)]
	 
	  uni.previewImage({
	    urls: arr,
	    current: arr[0]
	  })
	}
  }
}
</script>

<style lang="scss" scoped>
.topsearch {
  padding: 20upx 0;
}
.mapimg {
  width: 40upx;
  display: block;
}
.titel {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}
.lsitobg {
  background: #fff;
  border-radius: 16upx;
  padding: 32upx;
  margin-top: 16upx;
}
.lsitimg {
  width: 112upx;
  height: 112upx;
  border-radius: 16upx;
  margin-right: 20upx;
}
::v-deep .lsitbox {
  padding: 32upx;
}
.viewb {
  width: 40upx;
  height: 40upx;
  display: block;
}
.names {
  color: #333;
  font-size: 36upx;
}
.names text {
  color: #eb3e00;
  border: 1px solid #eb3e00;
  font-size: 20upx;
  border-radius: 25upx;
  padding: 5upx 10upx;
}
.names text.on {
  color: #2b88fe;
  border: 1px solid #2b88fe;
}
.maptel {
  width: 28upx;
  height: 28upx;
}
.mapicon {
  width: 30upx;
  height: 30upx;
  margin-top: 5upx;
  margin-right: 10upx;
}
.tel {
  color: #333;
  font-size: 24upx;
}
.buttonAdd {
  width: 654upx;
  height: 84upx;
  background: #2b88fe;
  border-radius: 8upx;
  position: fixed;
  bottom: 32upx;
  left: 50%;
  transform: translateX(-50%);
  line-height: 84upx;
  color: #fff;
  text-align: center;
  font-size: 32upx;
}
</style>